<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>格子广告</title>
		<link rel="stylesheet" href="__TMPL__Public/css/mul-downmenu.css" />
		<link rel="stylesheet" href="__TMPL__Public/css/normalize.css" />
		<link rel="stylesheet" href="__TMPL__Public/css/main.css?v2" />
		<link rel="stylesheet" href="__TMPL__Public/css/owl.carousel.css" />
		<link rel="stylesheet" href="__TMPL__Public/css/owl.theme.css" />
		<link rel="stylesheet" href="__TMPL__Public/css/kind.css?v2" />
		<link href="__TMPL__Public/model/swiper/swiper-3.4.0.min.css" rel="stylesheet" />
		<style type="text/css">
			#owl-demo {position: relative; width: 100%; margin-left: auto; margin-right: auto;}
			#owl-demo .item{ display: block;background: white;}
			#owl-demo img {display: inline-block; width: 100%;min-height: 103px;max-height: 103px;}
			.showpos-item.noad .item-box {box-sizing: border-box;}
			.mul-downmenu{position: fixed;width: 100%;z-index: 2;}
			.mul-downmenu .mul-downmenu-list{display: none;}
			.mul-downmenu-list .main-list{width: 50%;display: inline-block;height: 100%;overflow: auto;padding-bottom: 200px;box-sizing: border-box;}
			.mul-downmenu-list .sub-list{width: 50%;float: right;height: 100%;overflow: auto;padding-bottom: 200px;box-sizing: border-box;}
			.main-list,.sub-list{top: 41px;}
		</style>
	</head>
	<body>
		<div id="mul-downmenu" class="mul-downmenu">
			<div data-id="1" class="downmenu-head down htype">
			 <if condition="empty($kind)">
			           类别
			    <elseif condition="$kind eq '*'"/>全部
			    <else/>{$kind['pvalue']}
			 </if> 
			  
			</div>
			<div data-id="2" class="downmenu-head hcity">地区
			</div>
			<!--<div data-id="3" style="border: none;" class="downmenu-head horder">默认排序</div>-->
			<div class="mul-downmenu-list" style="z-index: 999;">
				<div class="main-list" style="height: 100%;overflow: auto;">
				</div>
				<div class="sub-list" style="height: 100%;overflow: auto;">
				</div>
			</div>
		</div>
		<div style="height: 40px;">
			
		</div>
		<ul class="friend">
      <volist name="res" id="r">
      <li>
        <div class="left-cell">
          <img src="{$r.icon}"/>
        </div>
        <div class="right-cell">
          <div class="title">{$r.nick}</div>
          <div class="content">
            <a href="/HGrid/kindmerchant/id/{$r.id}">
            <div>{$r.content|mb_substr=0,114,'utf-8'}...</div>
            </a>
            <div class="imglib">
              <foreach name="r.img" item="v">
                <img onclick="imglibclick(this)" class="lazy" data-original="{$v}"/>               
              </foreach>
            </div>
            <div class="date">
              {$r.create_time}
            </div>
          </div>
        </div>
      </li>
      </volist>
    </ul>
    <div class="swiper-shadow"> 
      <div class="swiper-container">
        <div class="swiper-wrapper">
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
		<!--<div class="showpos-box">
			<div class="gridlist">
			  <volist name="res" id="r">
			    <a href="/HGrid/kindmerchant/id/{$r.id}" class="grid-item">
            <img class="left" src="{$r.icon}"/>
            <div class="right cell">
              <div class="cell-right">
                <p class="text-price"><span style="font-size: 10px;">&yen;</span>{$r.price}<span style="font-size: 10px;">元</span></p>
                <p class="text-small">{$r.create_time}</p>
              </div>
              <div class="cell-left">
                <p>{$r.title}</p>
                <p class="text-small">{$r.name} {$r.pvalue}</p>
              </div>
            </div>
          </a>
			  </volist>
			</div>
		</div>-->
		<div class="footerbody"></div>
		<div id="tip" class="dialog">
			<div class="dialogbg">
				<div class="dlg-title">提示</div>
				<div class="dlg-content"></div>
				<button class="dlg-btn">确 定</button>
			</div>
		</div>
	</body>
	<script src="__TMPL__Public/js/jquery-1.11.0.js" ></script>
	<script src="__TMPL__Public/js/mul-downmenu-for-list.js?v3"></script>
  <script src="__TMPL__Public/model/swiper/swiper-3.4.0.min.js" ></script>
  <script src="__TMPL__Public/js/jquery.lazyload.min.js"></script>
	<script src="__TMPL__Public/js/main.js?{$version}"></script>
	<script src="__TMPL__Public/js/owl.carousel.min.js" ></script>
	<script type="text/javascript">
  	$(function() {
        $("img.lazy").lazyload({effect: "fadeIn"});
    });
		var md = new Mul_dm();
		var _error = "{$error}";
		md.init(); 
		var _load = new loader();
		_load.init("/themes/simplebootx_mobile/Public/img/loading.gif");
		window.onload = function(){
			$(".mul-downmenu-list").height(screen.height);
			var tip = new dialog();
			tip.init("tip");
			if(_error.length>0){
				$(".dlg-content").text(_error);
				tip.show();
			}
		}
		$(function(){
			$('#owl-demo').owlCarousel({
				items: 1,
				autoPlay: true
			});
		});
	</script>
	<script type="text/javascript">
  var page = 2;
  var moretype = "";
  toast.init();
    var mySwiper= new Swiper('.swiper-container', {
        pagination : '.swiper-pagination',
        lazyLoading : true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,
    });
    var boxwidth = $(".swiper-shadow").width();
    var imgheight = 40;
    $(".imglib img").each(function(){
      var t= $(this);
      t.height(t.width());
      imgheight = t.height();
    })
    function imglibclick(obj){
      var t = $(obj);
      var pre= t.prevAll();
      var index = pre?pre.length:0;
      var imgs = t.parent().children("img");
      var wrapper = $(".swiper-wrapper");
      var html="";
      wrapper.empty();
      imgs.each(function(){
        html+='<img class="swiper-slide" src="'+$(this).attr("src")+'"/>';
      })
      wrapper.html(html);
      mySwiper.slideTo(index,100,false);
      $(".swiper-shadow").show();
    }
//  $(".imglib img").on("click",function(){
//    var t = $(this);
//    var pre= t.prevAll();
//    var index = pre?pre.length:0;
//    var imgs = t.parent().children("img");
//    var wrapper = $(".swiper-wrapper");
//    var html="";
//    wrapper.empty();
//    imgs.each(function(){
//      html+='<img class="swiper-slide" src="'+$(this).attr("src")+'"/>';
//    })
//    wrapper.html(html);
//    mySwiper.slideTo(index,100,false);
//    $(".swiper-shadow").show();
//  });
    $(".swiper-shadow").on("click",function(){
      var t =$(this);
       t.hide(); 
    });
    $(window).scroll(function () {
    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
      $.ajax({
        type:"get",
        url:"/HGrid/moregridkind/page/"+page+"/height/"+imgheight+"/type/"+moretype,
        async:false,
        success:function(res){
          if(res.status==1){
            if(res.info&&res.info.length>0){
              $(".friend").append(res.info);
              $("img.lazypage"+page).lazyload({effect: "fadeIn"});
              page++;
            }else{
              toast.show("没有更多了");
            }
          }
        },error:function(){
          
        }
      });
    }
  });
  </script>
</html>
